<template>
  <div style="min-height: 1000px">
    <div style="background-color: #fdfcfc; padding: 40px 0">
      <div style="width: 60%; margin: 0 auto; display: flex; grid-gap: 40px">
        <img :src="data.albumData.img" alt="" style="width: 250px; height: 250px; border-radius: 5px">
        <div>
          <div style="font-size: 31px; font-weight: 300">《{{ data.albumData.name }}》</div>
          <div style="display: flex; align-items: center; grid-gap: 5px; margin-top: 10px">
            <el-icon size="16"><Avatar /></el-icon>
            <div style="cursor: pointer; font-size: 16px" @click="router.push('/front/singerDetail?id=' + data.albumData.singerId)">{{ data.albumData.singerName }}</div>
          </div>
          <div style="margin-top: 10px; color: #666666">热度：🔥{{ data.albumData.hot }}</div>
          <div style="margin-top: 10px; color: #666666">语种：{{ data.albumData.language }}</div>
          <div style="margin-top: 5px; color: #666666">唱片公司：{{ data.albumData.company }}</div>
          <div style="margin-top: 5px; color: #666666">发行时间：{{ data.albumData.time }}</div>
          <div style="margin-top: 20px">
            <el-button type="success" :disabled="!data.songData.length" @click="playAll"><el-icon><VideoPlay /></el-icon><span style="margin-left: 5px">加入播放列表</span></el-button>
            <el-button type="warning" v-if="!data.collectData.length" @click="collectAlbum"><el-icon><Star /></el-icon><span style="margin-left: 5px">收藏专辑</span></el-button>
            <el-button type="danger" v-else @click="disCollectAlbum"><el-icon><StarFilled /></el-icon><span style="margin-left: 5px">取消收藏</span></el-button>
          </div>
        </div>
      </div>
    </div>
    <div style="width: 60%; margin: 50px auto; display: flex; grid-gap: 30px">
      <div style="flex: 1">
        <div style="font-size: 20px; margin-bottom: 20px">曲目列表（{{ data.songData.length }}）</div>
        <el-table :data="data.songData" stripe>
          <el-table-column prop="name" label="名称" width="200" show-overflow-tooltip>
            <template v-slot="scope">
              <a :href="'/front/songDetail?id=' + scope.row.id" style="color: #1357be">{{ scope.row.name }}</a>
            </template>
          </el-table-column>
          <el-table-column prop="time" label="发行时间" width="120"></el-table-column>
          <el-table-column prop="categoryName" label="所属分类" show-overflow-tooltip></el-table-column>
          <el-table-column prop="duration" label="时长" show-overflow-tooltip></el-table-column>
          <el-table-column prop="hot" label="热度">
            <template v-slot="scope">🔥{{ scope.row.hot }}</template>
          </el-table-column>
          <el-table-column label="" width="100" fixed="right">
            <template v-slot="scope">
              <div style="display: flex; align-items: center; grid-gap: 10px">
                <el-icon style="cursor: pointer; color: #8c8b8b" size="20" v-if="!scope.row.collectId" @click="collectSong(scope.row.id)"><Star /></el-icon>
                <el-icon style="cursor: pointer; color: #e1bc43" size="20" v-else @click="disCollectSong(scope.row.collectId)"><StarFilled /></el-icon>
                <el-icon style="cursor: pointer; color: #8c8b8b" size="20" @click="addPlaylistInit(scope.row.id)"><FolderAdd /></el-icon>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="width: 300px">
        <div style="font-size: 20px">简介</div>
        <div style="margin-top: 10px; font-size: 15px; line-height: 25px; text-align: justify">{{ data.albumData.description }}</div>
        <div style="font-size: 20px; margin-top: 20px">该歌手其他专辑</div>
        <div style="margin-top: 10px">
          <el-row :gutter="10">
            <el-col :span="8" v-for="item in data.otherAlbum" style="margin-bottom: 10px">
              <img :src="item.img" alt="" style="width: 100%; height: 90px; border-radius: 5px; cursor: pointer" @click="navTo('/front/albumDetail?id=' + item.id + '&singerId=' + item.singerId)">
              <div>{{ item.name }}</div>
              <div style="color: #666666">{{ item.time }}</div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <el-dialog title="我的歌单" v-model="data.formVisible" width="40%" destroy-on-close>
      <el-form ref="formRef" :rules="data.rules" :model="data.form" label-width="80px" style="padding: 20px">
        <el-form-item prop="playlistId" label="选择歌单">
          <el-select v-model="data.form.playlistId" placeholder="请选择歌单" style="width: 90%">
            <el-option v-for="item in data.playlistData" :key="item.id" :label="item.name" :value="item.id"/>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="data.formVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <MusicPlayer :musicList="data.songData" v-if="data.songData?.length && data.playFlag" />
  </div>

</template>

<script setup>
import {reactive, ref} from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";
import {Delete, Edit} from "@element-plus/icons-vue";
import MusicPlayer from "@/views/components/MusicPlayer.vue";
const formRef = ref()
const data = reactive({
  user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
  albumId: router.currentRoute.value.query.id,
  singerId: router.currentRoute.value.query.singerId,
  albumData: [],
  otherAlbum: [],
  songData: [],
  collectData: [],
  playFlag: false,
  playlistData: [],
  form: {},
  formVisible: false,
  rules: {
    playlistId: [
      { required: true, message: '请选择歌单', trigger: 'blur' }
    ],
  }
})

const addPlaylistInit = (songId) => {
  request.get('/playlist/selectAll', {
    params: {
      userId: data.user.id
    }
  }).then(res => {
    if (res.code === '200') {
      data.playlistData = res.data
      data.form = {}
      data.form.songId = songId
      data.formVisible = true
    } else {
      ElMessage.error(res.msg)
    }
  })
}

const save = () => {
  formRef.value.validate(valid => {
    if (valid) {
      request.post('/playlistItem/add', data.form).then(res => {
        if (res.code === '200') {
          ElMessage.success('加入成功')
          data.formVisible = false
        } else {
          ElMessage.error(res.msg)
        }
      })
    }
  })
}

const playAll = () => {
  data.playFlag = true
}

const loadAlbum = () => {
  request.get('/album/selectAll', {
    params: {
      singerId: data.singerId
    }
  }).then(res => {
    if (res.code === '200') {
      data.albumData = res.data.filter(v => v.id + '' === data.albumId)[0]
      data.otherAlbum = res.data.filter(v => v.id + '' !== data.albumId)
      data.albumData.hot = data.albumData.hot + 1
      request.put('/album/update', data.albumData)
    } else {
      ElMessage.error(res.msg)
    }
  })
}
loadAlbum()

const loadSongs = () => {
  request.get('/sing/selectAll', {
    params: {
      albumId: data.albumId
    }
  }).then(res => {
    if (res.code === '200') {
      data.songData = res.data
    } else {
      ElMessage.error(res.msg)
    }
  })
}
loadSongs()

const navTo = (url) => {
  location.href = url
}

const collectAlbum = () => {
  request.post('/collect/add', {
    relId: data.albumId,
    type: 'ALBUM'
  }).then(res => {
    if (res.code === '200') {
      ElMessage.success('收藏成功')
      loadCollect()
    } else {
      ElMessage.error(res.msg)
    }
  })
}

const disCollectAlbum = () => {
  request.delete('/collect/delete/' + data.collectData[0].id).then(res => {
    if (res.code === '200') {
      ElMessage.success('取消成功')
      loadCollect()
    } else {
      ElMessage.error(res.msg)
    }
  })
}

const collectSong = (songId) => {
  request.post('/collect/add', {
    relId: songId,
    type: 'SONG'
  }).then(res => {
    if (res.code === '200') {
      ElMessage.success('收藏歌曲成功')
      loadSongs()
    } else {
      ElMessage.error(res.msg)
    }
  })
}

const disCollectSong = (id) => {
  request.delete('/collect/delete/' + id).then(res => {
    if (res.code === '200') {
      ElMessage.success('取消成功')
      loadSongs()
    } else {
      ElMessage.error(res.msg)
    }
  })
}

const loadCollect = () => {
  request.get('/collect/selectAll', {
    params: {
      userId: data.user.id,
      relId: data.albumId,
      type: 'ALBUM'
    }
  }).then(res => {
    if (res.code === '200') {
      data.collectData = res.data
    } else {
      ElMessage.error(res.msg)
    }
  })
}
loadCollect()
</script>